<template>
  <div>
    <Headline
      :headline1="$t('m.SystemManagement') + '  /  '"
      :headline2="$t('m.FunctionMenu')"
    />
    <a-card style="width: 100%">
      <a-button
          icon="plus"
          @click="add"
          type="primary"
          v-if="isTrue('sys:menu:add')"
      >{{ $t("m.Add") }}</a-button
      >

      <div v-if="data.length > 0">
        <a-table
          class="tree"
          :columns="columns"
          :data-source="data"
          :expanded-row-keys.sync="expandedRowKeys"
          :rowKey="(record) => record.menuId"
          bordered
          :expandedRowKeys="RowKeys"
          @expand="itema"
        >
          <div slot="type" slot-scope="text, tags">
            <div v-if="tags.type == 0">{{ $t("m.System") }}</div>
            <div v-else-if="tags.type == 1">{{ $t("m.FunctionMenu") }}</div>
            <div v-else>{{ $t("m.Button") }}</div>
          </div>
          <div slot="status" slot-scope="text, tags">
            <a-tag size="mini" color="blue" v-if="tags.status == 0">{{
              $t("m.invalid")
            }}</a-tag>
            <a-tag size="mini" color="blue" v-if="tags.status == 1">{{
              $t("m.Vaild")
            }}</a-tag>
          </div>

          <div slot="custlevel" slot-scope="text, tags">
            <a-tag size="mini" color="blue" v-if="tags.custlevel == 0">{{
                $t("m.YunmaiTechnology")
              }}</a-tag>
            <a-tag size="mini" color="blue" v-if="tags.custlevel == 1">{{
                $t("m.agent")
              }}</a-tag>   <a-tag size="mini" color="blue" v-if="tags.custlevel == 2">{{
                $t("m.endcustomer")
              }}</a-tag>
          </div>
          <div slot="tags" slot-scope="text, tags, i">
            <div class="btn">
              <a-button
                @click="changed(text, tags, i)"
                type="primary"
                style="margin-right: 15px"
                icon="edit"
                :disabled="!isTrue('sys:menu:update')"
                >{{ $t("m.Modification") }}</a-button
              >
              <a-button
                @click="showModal(text, tags, i)"
                type="danger"
                icon="delete"
                :disabled="!isTrue('sys:menu:del')"
                >{{ $t("m.Delete") }}</a-button
              >
            </div>
          </div>
          <div slot="iconCls" slot-scope="text, tags">
            <div v-if="tags.iconCls">
              <a-icon class="icons" :type="tags.iconCls" />
            </div>
          </div>
        </a-table>
      </div>
    </a-card>
    <a-modal
      :title="title"
      :visible="visible"
      @cancel="handleCancel"
      :footer="null"
      width="600px"
    >
      <a-form
        :form="form"
        :label-col="{ span: 7 }"
        :wrapper-col="{ span: 15 }"
        @submit="handleSubmit"
      >
        <a-form-item :label="$t('m.majorKey')">
          <a-input
            :disabled="true"
            v-decorator="[
              'menuId',
              {
                rules: [{ required: true, message: this.$t('m.pleaseInput') }],
              },
            ]"
          />
        </a-form-item>
        <a-form-item :label="$t('m.Type')">
          <a-select
            v-decorator="[
              'type',
              {
                rules: [
                  { required: true, message: this.$t('m.PleaseSelectAType') },
                ],
              },
            ]"
            :placeholder="$t('m.PleaseSelectAType')"
          >
            <a-select-option value="0"> {{ $t("m.System") }} </a-select-option>
            <a-select-option value="1">
              {{ $t("m.FunctionMenu") }}
            </a-select-option>
            <a-select-option value="2"> {{ $t("m.Button") }} </a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item :label="$t('m.Name')">
          <a-input
            :placeholder="$t('m.PleaseEnterMenuName')"
            v-decorator="[
              'menuName',
              {
                rules: [{ required: true, message: this.$t('m.pleaseInput') }],
              },
            ]"
          />
        </a-form-item>
        <a-form-item :label="$t('m.parentMenu')">
          <a-tree-select
            v-decorator="[
              'parentId',
              {
                rules: [
                  {
                    required: true,
                    message: this.$t('m.PleaseSelectTheParentMenu'),
                  },
                ],
              },
            ]"
            show-search
            style="width: 100%"
            :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
            :placeholder="$t('m.PleaseSelectTheParentMenu')"
            allow-clear
            tree-default-expand-all
          >
            <a-tree-select-node
              :key="item.menuId"
              :value="item.menuId"
              v-for="item in datas"
              :title="item.menuName"
            >
              <a-tree-select-node
                :key="citem.menuId"
                :value="citem.menuId"
                v-for="citem in item.children"
                :title="citem.menuName"
              >
                <a-tree-select-node
                    :key="sitem.menuId"
                    :value="sitem.menuId"
                    v-for="sitem in citem.children"
                    :title="sitem.menuName"
                >
                </a-tree-select-node>
              </a-tree-select-node>
            </a-tree-select-node>
          </a-tree-select>
        </a-form-item>
        <a-form-item :label="$t('m.FrontEndPageURL')">
          <a-input
            :placeholder="$t('m.PleaseEnterTheMenuURL')"
            v-decorator="[
              'url',
              {
                rules: [{ required: false, message: this.$t('m.pleaseInput') }],
              },
            ]"
          />
        </a-form-item>
        <a-form-item :label="$t('m.PermissionToIdentify')">
          <a-input
            placeholder="多个用逗号分隔，如：user:list,user:create"
            v-decorator="[
              'perms',
              {
                rules: [{ required: false, message: this.$t('m.pleaseInput') }],
              },
            ]"
          />
        </a-form-item>
        <a-form-item :label="$t('m.Icon')">
          <a-input
            :placeholder="$t('m.PleaseSelectIcon')"
            @click="iconBlur"
            v-decorator="[
              'iconCls',
              {
                rules: [{ required: false, message: this.$t('m.pleaseInput') }],
              },
            ]"
          />
        </a-form-item>
        <a-form-item :label="$t('m.Sort')">
          <a-input
            v-decorator="[
              'sort',
              {
                rules: [{ required: true, message: this.$t('m.pleaseInput') }],
              },
            ]"
          />
        </a-form-item>
        <a-form-item :label="$t('m.StateMenu')">
          <a-select
            v-decorator="[
              'status',
              {
                rules: [
                  { required: true, message: this.$t('m.PleaseSelectStatus') },
                ],
              },
            ]"
            :placeholder="$t('m.PleaseSelectStatus')"
          >
            <a-select-option value="0"> 无效 </a-select-option>
            <a-select-option value="1"> 有效 </a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item :label="$t('m.PERMISSIONLEVEL')">
          <a-select
              v-decorator="[
              'custlevel',
              {
                rules: [
                  { required: true, message: this.$t('m.PlaseEnterpermissionlevel') },
                ],
              },
            ]"
              style="width: 348px"
              :placeholder="$t('m.PlaseEnterpermissionlevel')"
          >
          <a-select-option value="0"> 云麦科技 </a-select-option>
          <a-select-option value="1"> 代理商 </a-select-option>
          <a-select-option value="2"> 终端客户 </a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item :wrapper-col="{ span: 12, offset: 20 }">
          <a-button type="primary" html-type="submit">
            {{ $t("m.Ok") }}
          </a-button>
        </a-form-item>
      </a-form>
    </a-modal>
    <Delete ref="del" :dalete="dalete" @confirm="delIsok" />
    <a-modal
      class="iconModel"
      :title="$t('m.PleaseSelectIcon')"
      :visible="iconVisible"
      width="700px"
     :cancelText="$t('m.Cancel')"
      :okText="$t('m.Ok')"
      @cancel="iconHandleCancel"
    >
      <a-icon
        class="icon"
        v-for="item in icon"
        :key="item.key"
        :type="item.type"
        @click="iconClick(item)"
      />

      <template slot="footer">
        <a-button @click="handleCancels">{{ $t("m.Close") }}</a-button>
      </template>
    </a-modal>
  </div>
</template>

<script>
import Headline from "@/components/Headline";
import Delete from "@/components/Delete";
import {
  getSysNavList,
  getSysMenuList,
  getNotButtonMenuList,
  delSysMenu,
  saveSysMenu,
} from "@/api/systemmanagement";
import { icons } from "@/static/js/icon";
import { Setperms } from "@/assets/js/setperms";
export default {
  name: "FunctionMenu",
  components: { Headline, Delete },
  data() {
    return {
      parentValue: "",
      data: [],
      RowKeys: [],
      columns: [
        {
          title: this.$t("m.Name"),
          dataIndex: "menuName",
        },

        {
          title: this.$t("m.Type"),
          key: "type",
          dataIndex: "type",
          scopedSlots: { customRender: "type" },
        },

        {
          title: this.$t("m.Status"),
          key: "status",
          dataIndex: "status",
          scopedSlots: { customRender: "status" },
        },

        {
          title: this.$t("m.Sort"),
          dataIndex: "sort",
        },
        {
          title: this.$t("m.TheMenuURL"),
          dataIndex: "url",
        },
        {
          title: this.$t("m.TheMenuIcon"),
          key: "iconCls",
          dataIndex: "iconCls",
          scopedSlots: { customRender: "iconCls" },
        },
        {
          title: this.$t("m.PermissionToIdentify"),
          dataIndex: "perms",
        },
        {
          title: this.$t("m.PERMISSIONLEVEL"),
          key: "custlevel",
          dataIndex: "custlevel",
          scopedSlots: { customRender: "custlevel" },

        },
        {
          title: this.$t("m.Operation"),
          key: "tags",
          dataIndex: "address",
          scopedSlots: { customRender: "tags" },
        },
      ],
      icon: icons,
      visible: false,
      custlevel:'',
      form: this.$form.createForm(this, { name: "coordinated" }),
      delMenuId: "",
      iconVisible: false,
      replaceFields: {
        title: "menuName",
        key: "menuId",
        children: "children",
      },
      dalete: {
        titles: this.$t("m.DeleteThePrompt"),
        type: "exclamation-point",
        text: this.$t("m.AreYouSureToDeleteThisData"),
      },
      title: "",
      datas: [],
      expandedRowKeys: [],
      parms: "",
    };
  },
  created() {
    this.getNotButtonList();
    this._getNotButtonMenuList();
    this.parms = Setperms(
      this.$route.fullPath,
      JSON.parse(sessionStorage.getItem("menu"))
    );
    console.log(this.parms);

    //  console.log(this.$route)
  },
  methods: {
    isTrue(str) {
      return this.parms.indexOf(str) !== -1;
    },
    _getNotButtonMenuList() {
      getNotButtonMenuList().then((res) => {
        console.log(res);
        this.datas = res.data.data;
      });
    },
    iconHandleCancel() {
      this.iconVisible = false;
    },
    iconClick(item) {
      console.log(item.type);
      this.form.setFieldsValue({ iconCls: item.type });
      this.iconVisible = false;
    },

    iconBlur() {
      this.iconVisible = true;
    },
    delIsok() {
      delSysMenu({ menuId: this.delMenuId })
        .then((res) => {
          if (res.data.success == true) {
            this.$message.success("删除菜单成功");
            this.getNotButtonList();
          }
          if (res.data.success == false) {
            this.$message.error("添加菜单失败");
          }
        })
        .catch((err) => {
          this.$message.error("删除失败");
        });
      this.$refs.del.visible = false;
    },
    del(text, tags, i) {
      this.$refs.del.visible = true;
      this.delMenuId = tags.menuId;
      console.log(tags.menuId);
    },
    handleSelectChange(e) {
      console.log(e);
    },
    handleSubmit(e) {
     e.preventDefault();
      this.form.validateFields((err, values) => {
        console.log(values)
        if (!err) {
          if (values.perms == undefined) {
            values.perms = "";
          }
          if (values.url == undefined) {
            values.url = "";
          }
          console.log(values);
          saveSysMenu(values)
            .then((res) => {
              if (res.data.success == true) {
                this.$message.success("添加菜单成功");
                this.visible = false;
                this.getNotButtonList();
              }
              if (res.data.success == false) {
                this.$message.error("添加菜单失败");
                this.visible = false;
              }
              this.form.resetFields();
              console.log(res);
            })
            .catch((err) => {
              this.visible = false;
              this.$message.error("操作失败");
            });
        }
      });
    },
    itema(expanded, record) {
      console.log(expanded, record);
      if (expanded) {
        this.RowKeys.push(record.menuId);
      } else {
        this.RowKeys.forEach((item, index) => {
          if (item == record.menuId) {
            this.RowKeys.splice(index, 1);
          }
        });
      }
    },
    add() {
      this.title = "新增菜单";
      this.visible = true;
      setTimeout(() => {
        this.form.setFieldsValue({ menuId: 0 });
      }, 200);
    },
    handleCancel() {
      this.form.resetFields();
      this.visible = false;
    },
    handleCancels() {
      this.iconVisible = false;
    },
    edit(text, tags, i) {
      // this.form.setFieldsValue(tags)
      console.log(tags);
      this.visible = true;
    },

    getNotButtonList() {
      getSysMenuList()
        .then((res) => {
          console.log(res.data.data);
          this.data = res.data.data;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    changed(text, tags, i) {
      console.log(tags);
      this.title = "修改菜单";
      setTimeout(() => {
        this.form.setFieldsValue({
          menuId: tags.menuId + "",
          menuName: tags.menuName + "",
          parentId: tags.parentId + "",
          url: tags.url,
          iconCls: tags.iconCls,
          type: tags.type + "",
          sort: tags.sort,
          perms: tags.perms,
          status: tags.status + "",
          custlevel: tags.custlevel+""
        });
      }, 200);

      this.visible = true;
    },
    //删除
    showModal(text, tags, i) {
      this.delMenuId = tags.menuId;
      this.$refs.del.visible = true;
    },
    addbtn(row) {},
    onChange(selectedRowKeys, selectedRows) {
      console.log(
        `selectedRowKeys: ${selectedRowKeys}`,
        "selectedRows: ",
        selectedRows
      );
    },
    onSelect(record, selected, selectedRows) {
      console.log(record, selected, selectedRows);
    },
    onSelectAll(selected, selectedRows, changeRows) {
      console.log(selected, selectedRows, changeRows);
    },
  },
};
</script>

<style lang="scss" scoped>
.icon {
  font-size: 33px;
  margin: 10px;
}
.tree {
  margin-top: 30px;
}
.btn a {
  margin: 0 10px;
}

/deep/ .zk-table__body-wrapper {
  font-size: 14px;
}
/deep/ .tree {
  font-size: 14px;
}
.icons {
  font-size: 16px;
}
/deep/ .ant-form-item {
  margin-bottom: 15px !important;
}
/deep/ .ant-table-row-level-1 td:first-child .indent-level-1 {
  margin-left: 23px !important;
}
/deep/ .ant-table-row-level-2 td .indent-level-2 {
  margin-left: 46px !important;
}
/deep/ .ant-table-row-level-3 td .indent-level-3 {
  margin-left: 69px !important;
}
.iconModel /deep/ .ant-modal-wrap .ant-modal-body {
  height: 500px;
  overflow-y: auto;
}
/deep/ .ant-modal-body::-webkit-scrollbar {
  display: none; /* Chrome Safari */
}
</style>
